<template>
  <div class="afterKnowledge">
    <div class="afterKnowledge-header clearfloat">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/mechanism/home/menu' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>国知局后</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="btns fr">
        <el-button class="mr20" @click="toMyOrder"
          >我的订单：{{ myOrderTotal }}</el-button
        >
      </div>
    </div>
    <div class="afterKnowledge-main" ref="watermark">
      <el-table
        :data="tableData"
        @row-click="openDetails"
        border
        ref="orderTb"
        height="100%"
        v-loading="loading"
      >
        <!-- <el-table-column
          prop="id"
          label="ID"
          min-width="70"
          align="left"
          show-overflow-tooltip
        ></el-table-column> -->
        <el-table-column
          prop="order_number"
          label="订单编号"
          align="left"
          min-width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="流程状态"
          align="left"
          min-width="120"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="name"
          label="申报名称"
          align="left"
          min-width="200"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="type"
          label="专利类型"
          align="left"
          min-width="120"
          sortable
          show-overflow-tooltip
          ><template slot-scope="scope">{{
            scope.row.type == "F"
              ? "发明专利"
              : scope.row.type == "S"
              ? "实用新型"
              : "外观设计"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="patent_user"
          label="专利权人"
          align="left"
          min-width="120"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.patent_user }}
          </template>
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="发明人"
          align="left"
          min-width="120"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.user_name }}
          </template>
        </el-table-column>
        <el-table-column
          prop="liaisons"
          label="联络人"
          align="left"
          min-width="100"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.liaisons }}
          </template>
        </el-table-column>
        <el-table-column
          prop="id_card"
          label="身份证号"
          align="left"
          min-width="180"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.id_card }}
          </template>
        </el-table-column>
        <el-table-column
          prop="liaisons_tel"
          label="电话"
          align="left"
          min-width="150"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.liaisons_tel }}
          </template>
        </el-table-column>
        <el-table-column
          prop="liaisons_email"
          label="邮箱"
          align="left"
          min-width="200"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.liaisons_email }}
          </template>
        </el-table-column>
        <el-table-column
          prop="application_number"
          label="申请号"
          align="left"
          min-width="120"
          sortable
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="process"
          label="专属顾问"
          align="left"
          min-width="120"
          show-overflow-tooltip
          sortable
        >
          <template slot-scope="scope">
            <span v-if="scope.row.order">
              <template v-if="scope.row.order.process">
                {{ scope.row.order.process.name }}
              </template>
            </span>
            <!-- {{ scope.row.order.process | processNumber}} -->
          </template>
        </el-table-column>
        <el-table-column
          label="定稿文件"
          align="left"
          min-width="200"
          sortable
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div @click.stop class="flie-hid" v-if="scope.row.order && scope.row.order.confirm_file">
              <a
                v-for="item in scope.row.confirmFile"
                :key="item.id"
                :href="baseUrl + '/api/download?path=' + item.file + '/' + item.path"
                :download="item.path"
                :title="item.path"
                class="el-icon-tickets file_sh"
              ></a>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="submit_at"
          label="申报时间"
          align="left"
          min-width="150"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="updated_at"
          label="更新时间"
          align="left"
          min-width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="created_at"
          label="定稿时间"
          align="left"
          min-width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="order_created_at"
          label="发明人提交时间"
          align="left"
          min-width="180"
          show-overflow-tooltip
          sortable
        >
          <template slot-scope="scope">
            {{ scope.row.order && scope.row.order.created_at }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click.native.stop="sendSLNotice(scope.row)"
              v-if="!scope.row.acceptance_note_file"
              >上传受通</el-button
            >

            <el-button
              type="success"
              size="mini"
              :disabled="scope.row.answer_file != ''"
              @click.native.stop="submitPeplyFile(scope.row)"
              v-if="
                scope.row.opinion_file &&
                (scope.row.status == '等待答复' || scope.row.status == '等待补正')
              "
              >提交答复补正</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click.native.stop="sentReplyFile(scope.row)"
              v-if="
                scope.row.status != '等待答复' &&
                scope.row.status != '等待补正' &&
                scope.row.status != '等待提交国知局'
              "
              >上传通知书</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination @paginationChange="paginateChange" :total="total"></pagination>
    </div>
    <inProcessInfo ref="inProcessInfo" />
    <!-- 发送受通 -->
    <sendSLNotice ref="sendSLNotice" @refresh="getTableData" />
    <!-- 上传答复补正文件 -->
    <sendNotificationFileDialog
      ref="sendNotificationFileDialog"
      @refresh="getTableData"
    />
    <!-- 提交答复补正文件 -->
    <submitPeplyFileDialog ref="submitPeplyFileDialog" @refresh="getTableData" />
  </div>
</template>

<script>
import Pagination from "~/components/pagination";
import Watermark from "./components/watermark";
import inProcessInfo from "./components/inProcess-info";
import sendSLNotice from "./components/sendSLNotice";
import sendNotificationFileDialog from "./components/sendNotificationFileDialog";
import submitPeplyFileDialog from "./components/submitPeplyFileDialog";
export default {
  components: {
    Pagination,
    inProcessInfo,
    sendSLNotice,
    sendNotificationFileDialog,
    submitPeplyFileDialog,
  },
  data() {
    return {
      tableData: [],
      total: 1,
      //详情对话框
      pageSize: 25,
      currentPage: 1,
      total: 5,
      loading: false,
      showForm: { name: "asdf", region: "124" },
      userId: null,
      myOrderTotal: 0,
      baseUrl: global.baseurl,
    };
  },
  mounted() {
    let user = JSON.parse(sessionStorage.getItem("store"));
    let name = "";
    if (user) {
      name = user.user.name;
    } else {
      name = this.$store.state.user.name || "";
    }
    Watermark.set(name, this.$refs.watermark);
  },
  watch: {
    tableData: {
      handler: function (val) {
        val.forEach((v) => {
          if (v.order && v.order.confirm_file) {
            v.confirmFile = [];
            let reviewfile = v.order.confirm_file.split("&");
            for (let j in reviewfile) {
              let itemobj = {
                id: j + 1,
                path: reviewfile[j],
                file: "",
              };
              let itemArr = itemobj.path.split("/");
              itemobj.path = itemArr[itemArr.length - 1];
              itemobj.file = itemArr.slice(0, 2).join("/");
              v.confirmFile.push(itemobj);
            }
            console.log(v.confirmFile);
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    sendSLNotice(row) {
      this.$refs["sendSLNotice"].show(row);
    },
    sentReplyFile(row) {
      this.$refs["sendNotificationFileDialog"].show(row);
    },
    submitPeplyFile(row) {
      this.$refs["submitPeplyFileDialog"].show(row);
    },
    openDetails(row) {
      this.$refs["inProcessInfo"].show(row);
    },
    //返回去我的订单
    toMyOrder() {
      this.$router.push("/mechanism/order/myOrder");
    },
    paginateChange(params) {
      this.pageSize = params.perPage;
      this.currentPage = params.page;
      this.getTableData();
    },

    getTableData(args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
        // agent_id: id,
        status:
          "修改,等待提交国知局,已提交国知局,等待补正,已补正,等待答复,已答复,发明人确认答复中,发明人确认补正中,初步审查合格,实质审查中,驳回,授权,下证,撤案,申诉中",
      };
      if (args) {
        params = { ...params, ...args };
      }
      this.loading = true;
      this.$axios
        .get("api/finals", {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.loading = false;
            this.tableData = res.data.data;
            this.pageSize = res.data.page.per_page;
            this.total = res.data.page.total;
            this.myOrderTotal = res.data.count.myOrder;
            // this.getMyinfo()
          } else {
            this.loading = false;
            this.$message.error("服务器繁忙");
          }
        });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.afterKnowledge {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  padding: 25px 30px 0 30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  .el-table__body-wrapper {
    // opacity: 0.7;
  }
  &-header {
    // height: 45px;
    flex: 0 0 45px;
    /deep/.el-breadcrumb {
      margin-bottom: 10px;
      height: 40px;
      .el-breadcrumb__item {
        line-height: 40px;
        .el-breadcrumb__inner,
        .el-breadcrumb__separator {
          font-size: 25px;
          color: rgba(0, 35, 151, 1);
          font-weight: 400;
        }
      }
      .el-breadcrumb__item:first-child {
        .el-breadcrumb__inner {
          padding-left: 10px;
          border-left: 5px solid #002397;
        }
      }
    }
    box-sizing: border-box;
    .btns {
      line-height: 40px;
      .el-button {
        border: 1px solid #249dff;
        border-radius: 12px;
        padding: 5px 16px;
        display: inline-block;
        font-size: 15px;
        line-height: 1;
        color: #249dff;
        margin: 0 20px 10px 0;
      }

      .el-button:hover {
        background: rgba(36, 157, 255, 1);
        color: #fff;
      }
    }
    .table-search {
      margin-bottom: 10px;
    }
    .addAgentOrder {
      background: #58a5ea;
      color: #fff;
    }
  }
  &-main {
    flex: 1;
    max-height: calc(100% - 115px);
    height: 720px;
  }
  &-bottom {
    flex: 0 0 70px;
    padding-top: 19px;
  }
  .file_sh {
    font-size: 25px;
    margin-right: 10px;
  }
}
.leaveWordDialog {
  width: 50%;
  margin: auto;
  .leaveWord-label {
    display: block;
    margin-bottom: 10px;
  }
  .el-textarea {
    display: block;
    margin-bottom: 20px;
  }
}

#applyBtn {
  margin-left: 80%;
  margin-top: 20px;
}
</style>
